<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta name="apple-mobile-web-app-capable" content="no"/>
    <meta name="wap-font-scale" content="no">
    <meta content="telephone=no" name="format-detection">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>个人中心-我的银行卡</title>
    <link rel="stylesheet" href="css/cropper.min.css">
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <link rel="stylesheet" href="css/sliderBox.float.css">
    <link rel="stylesheet" href="css/jBox.css">
    <link rel="stylesheet" href="css/base.min.css">
    <link rel="stylesheet" href="css/user.min.css">
</head>
<body>
<div class="wrap gray">
    <div class="head-box">
        <div class="header static">
            <div class="container">
                <div class="row">
                    <div class="logo-box">
                        <a class="logo" href="index.html"><img src="img/logo.png"></a>
                        <div class="area-box">
                            <div class="fb-select-box fn-hover-bar">
                                <label class="hd">
                                    <i class="glyphicon glyphicon-map-marker"></i>
                                    <span id="cityName">重庆市</span>
                                    <em class="glyphicon glyphicon-triangle-bottom"></em>
                                </label>
                                <div class="bd fn-hover-menu">
                                    <div class="city-box">
                                        <div class="title clearfix">
                                            <a href="javascript:;" class="active">热门城市</a>
                                            <a href="javascript:;">ABCD</a>
                                            <a href="javascript:;">FGHJ</a>
                                            <a href="javascript:;">KLMN</a>
                                            <a href="javascript:;">QSTW</a>
                                            <a href="javascript:;">XYZ</a>
                                        </div>
                                        <div class="cont">
                                            <div class="item active">
                                                <div class="city-list clearfix">
                                                    <a href="javascript:;">北京市</a>
                                                    <a href="javascript:;">上海市</a>
                                                    <a href="javascript:;">广州市</a>
                                                    <a href="javascript:;">深圳市</a>
                                                    <a href="javascript:;">成都市</a>
                                                    <a href="javascript:;">重庆市</a>
                                                    <a href="javascript:;">武汉市</a>
                                                    <a href="javascript:;">沈阳市</a>
                                                    <a href="javascript:;">大连市</a>
                                                    <a href="javascript:;">郑州市</a>
                                                    <a href="javascript:;">西安市</a>
                                                    <a href="javascript:;">南京市</a>
                                                    <a href="javascript:;">苏州市</a>
                                                    <a href="javascript:;">无锡市</a>
                                                    <a href="javascript:;">徐州市</a>
                                                    <a href="javascript:;">杭州市</a>
                                                    <a href="javascript:;">宁波市</a>
                                                    <a href="javascript:;">天津市</a>
                                                    <a href="javascript:;">昆明市</a>
                                                    <a href="javascript:;">南宁市</a>
                                                    <a href="javascript:;">合肥市</a>
                                                    <a href="javascript:;">长沙市</a>
                                                    <a href="javascript:;">青岛市</a>
                                                    <a href="javascript:;">哈尔滨市</a>
                                                    <a href="javascript:;">兰州市</a>
                                                    <a href="javascript:;">东莞市</a>
                                                    <a href="javascript:;">惠州市</a>
                                                    <a href="javascript:;">佛山市</a>
                                                    <a href="javascript:;">贵阳市</a>
                                                    <a class="active" href="javascript:;">[ 更多 ]</a>
                                                </div>
                                            </div>
                                            <div class="item">
                                                <div class="city-list clearfix">
                                                    <a href="javascript:;">北京市</a>
                                                    <a href="javascript:;">上海市</a>
                                                    <a href="javascript:;">广州市</a>
                                                    <a href="javascript:;">深圳市</a>
                                                    <a href="javascript:;">成都市</a>
                                                    <a href="javascript:;">重庆市</a>
                                                    <a href="javascript:;">武汉市</a>
                                                    <a href="javascript:;">沈阳市</a>
                                                    <a href="javascript:;">大连市</a>
                                                    <a href="javascript:;">郑州市</a>
                                                    <a href="javascript:;">西安市</a>
                                                    <a href="javascript:;">南京市</a>
                                                    <a href="javascript:;">苏州市</a>
                                                    <a href="javascript:;">无锡市</a>
                                                </div>
                                            </div>
                                            <div class="item">
                                                <div class="city-list clearfix">
                                                    <a href="javascript:;">徐州市</a>
                                                    <a href="javascript:;">杭州市</a>
                                                    <a href="javascript:;">宁波市</a>
                                                    <a href="javascript:;">天津市</a>
                                                    <a href="javascript:;">昆明市</a>
                                                    <a href="javascript:;">南宁市</a>
                                                    <a href="javascript:;">合肥市</a>
                                                    <a href="javascript:;">长沙市</a>
                                                    <a href="javascript:;">青岛市</a>
                                                    <a href="javascript:;">哈尔滨市</a>
                                                    <a href="javascript:;">兰州市</a>
                                                    <a href="javascript:;">东莞市</a>
                                                    <a href="javascript:;">惠州市</a>
                                                    <a href="javascript:;">佛山市</a>
                                                </div>
                                            </div>
                                            <div class="item">
                                                <div class="city-list clearfix">
                                                    <a href="javascript:;">徐州市</a>
                                                    <a href="javascript:;">杭州市</a>
                                                    <a href="javascript:;">宁波市</a>
                                                    <a href="javascript:;">天津市</a>
                                                </div>
                                            </div>
                                            <div class="item">
                                                <div class="city-list clearfix">
                                                    <a href="javascript:;">哈尔滨市</a>
                                                    <a href="javascript:;">兰州市</a>
                                                    <a href="javascript:;">东莞市</a>
                                                    <a href="javascript:;">惠州市</a>
                                                    <a href="javascript:;">佛山市</a>
                                                </div>
                                            </div>
                                            <div class="item">
                                                <div class="city-list clearfix">
                                                    <a href="javascript:;">哈尔滨市</a>
                                                    <a href="javascript:;">兰州市</a>
                                                    <a href="javascript:;">东莞市</a>
                                                    <a href="javascript:;">惠州市</a>
                                                    <a href="javascript:;">佛山市</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="nav-box">
                        <ul>
                            <li class="active"><a href="index.html">首页</a></li>
                            <li><a href="afflatus.html">装修灵感</a></li>
                            <!--<li><a href="stylist.html">在线服务</a></li>-->
                            <li><a href="originality.html">创意工坊</a></li>
                            <li><a href="design.html">3D设计</a></li>
                        </ul>
                        <div class="login-register login">
                            <a class="user" href="personal.html">
                                <img src="img/stylist-headImg.jpg">
                            </a>
                            <a class="quit" href="javascript:;">退出</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="cont-box">
        <div class="container">
            <div class="row">
                <div class="personal-container">
                    <div class="left-bg"></div>
                    <div class="right-bg"></div>
                    <div class="p-slide-box">
                        <div class="fb-slide-nav">
                            <div class="son-nav">
                                <label class="title">个人中心</label>
                                <ul>
                                    <li><a href="stylist-details.html"><i class="fb-arrow-dir right"></i>我的主页</a></li>
                                    <li><a href="mine-design-stylist.html"><i class="fb-arrow-dir right"></i>我的设计</a>
                                    </li>
                                    <li><a href="mine-commission.html"><i class="fb-arrow-dir right"></i>我的佣金</a></li>
                                    <li><a href="commission-rule.html"><i class="fb-arrow-dir right"></i>佣金规则</a></li>
                                    <li><a class="active" href="mine-bank.html"><i class="fb-arrow-dir right"></i>我的银行卡</a>
                                    </li>
                                    <li><a href="mine-message.html"><i
                                            class="fb-arrow-dir right"></i>我的消息<em>12</em></a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="p-cont-box">
                        <div class="personal-cont-box">
                            <div class="p-c-title"><span>我的银行卡</span><em></em></div>
                            <div class="p-c-cont">
                                <!--含有银行卡-->
                                <div class="bank-list clearfix">
                                    <div class="col-xs-12">
                                        <div class="col-xs-6">
                                            <div class="bank-card fn-hover-bar">
                                                <a class="fn-hover-menu" href="javascript:;" id="editBank"><i
                                                        class="fb-sprite icon-edit white"></i></a>
                                                <label class="line"></label>
                                                <div class="bank-cont">
                                                    <label class="img"><img src="img/bank-card.png"></label>
                                                    <div class="text">
                                                        <label><span>持卡人：</span><em>张三</em></label>
                                                        <label><span>身份证号：</span><em>533232301256213</em></label>
                                                        <label><span>开户行：</span><em>中国银行建北支行</em></label>
                                                        <label><span>银行卡号：</span><em>6006123565623426</em></label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!--没有银行卡-->
                                <div class="stylist-design-none mt-0 pt-40" style="display: none">
                                    <label><img src="img/bank-none.png"></label>
                                    <span>您还没有银行卡信息，添加了银行卡才能提现哦</span>
                                    <a class="fb-btn background blue big line-block pl-40 pr-40 mt-30"
                                       href="javascript:;" id="addBank">添加银行卡</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="footer-box mt-0">
        <div class="container">
            <div class="row">
                <div class="footer-cont">
                    <div class="menu">
                        <span><a href="#">商家入驻</a></span>
                        <span><a href="#">商家后台</a></span>
                        <span><a href="VR-custom.html">VR定制</a></span>
                        <span><a href="about-us.html?type=opinion">意见反馈</a></span>
                        <span><a href="about-us.html?type=agreement">用户协议</a></span>
                        <span><a href="about-us.html?type=about">关于我们</a></span>
                        <span><a href="about-us.html?type=job">工作机会</a></span>
                        <span><a href="about-us.html?type=contact">联系我们</a></span>
                        <span><a href="about-us.html?type=map" class="bd-no-right">网站地图</a></span>
                    </div>
                    <div class="intro clearfix">
                        <div class="fl">
                            <p><label><i class="fb-sprite icon-area"></i></label><span>重庆市渝北区嘉州协信中心A栋23层</span></p>
                            <p><label><i class="fb-sprite icon-email"></i></label><span>Sale@19area.cn</span></p>
                            <p><label><i class="fb-sprite icon-phone"></i></label><span>商务合作：<em
                                    class="fs-18">13452828599  /  13647631899</em></span>
                            </p>
                        </div>
                        <div class="fr">
                            <label>
                                <img src="img/ewm.jpg">
                                <span>移动版</span>
                            </label>
                            <label>
                                <img src="img/ewm.jpg">
                                <span>商务合作</span>
                            </label>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <span class="copyright">Copyright© 2017 www.19area.cn 重庆十九地带科技有限公司 版权所有　渝ICP备14009506号</span>
    </div>
</div>
<div class="go-top-box">
    <a href="javascript:;" id="goTop"><i class="fb-sprite icon-top"></i></a>
</div>

<script type="text/template" id="cardHtml">
    <div class="pop-login card-box">
        <div class="user-form">
            <div class="item">
                <em>持卡人：</em>
                <label class="form-input border gray">
                    <input type="text" placeholder="请输入持卡人">
                </label>
            </div>
            <div class="item">
                <em>身份证号：</em>
                <label class="form-input border gray">
                    <input type="text" placeholder="身份证号">
                </label>
            </div>
            <div class="item">
                <em>银行卡号：</em>
                <label class="form-input border gray">
                    <input type="text" placeholder="身份证号">
                </label>
            </div>
            <div class="item code">
                <em>手机验证码：</em>
                <div class="clearfix">
                    <label class="form-input border gray">
                        <input type="text" placeholder="手机验证码">
                    </label>
                    <a class="fb-btn line blue current fr cut-down" href="javascript:;" id="countDown">获取验证码</a>
                    <div class="tc-orange mt-10 fl tm-left fs-12 d-none">验证码已发送至尾号2323的手机，请查收</div>
                </div>
            </div>
        </div>
    </div>
</script>
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/cropper.min.js"></script>
<script src="js/jquery.jbox.js"></script>
<script src="js/common.js"></script>
<script src="js/base.js"></script>
<script>
    $(function () {
        //添加银行卡
        $("#addBank").click(function () {
            $.jBox.confirm($("#cardHtml").html(), {
                title: "我的银行卡",
                close: true,
                btn: {
                    text: ["提交"],
                    jEnsure: function (opt) {

                    }
                },
                beforeClassFun: function (opt) {
                    opt.boxBtn.addClass("small");
                }
            });
        });

        //编辑银行卡
        $("#editBank").click(function () {
            var that = this;
            $.jBox.confirm($("#cardHtml").html(), {
                title: "我的银行卡",
                close: true,
                btn: {
                    text: ["提交"],
                    jEnsure: function (opt) {

                    }
                },
                beforeClassFun: function (opt) {
                    opt.boxBtn.addClass("small");
                    var $cardIntro = opt.boxTextBox.find(".card-box");
                    var $introText = $(that).parents(".bank-card").find(".text");
                    $cardIntro.find(".item").each(function (i) {
                        if (i <= 1) {
                            $(this).find("input").val($introText.find("label").eq(i).find("em").text());
                        }
                        if (i == 2) {
                            $(this).find("input").val($introText.find("label").eq(i + 1).find("em").text());
                        }
                    });
                }
            });
        });

        //绑定倒计时
        var countTime = "";
        if (countTime) countTime.stopTimeFun();
        $(document).on("click", "#countDown", function () {
            if ($(this).hasClass("active")) return false;
            $(this).next().removeClass("d-none");
            var time = 60;
            countTime = new FB.countDown(this, time, ["获取验证码", " 秒后重新获取"], function () {
                console.log("倒计时结束")
            });
        });
    })
</script>
</body>
</html>